<template>
  <div style="font-family:微软雅黑;">
    <div style="width:100%;height:320px;margin: 0 auto;">
      <el-card style="width:30%;text-align:center;height:300px;float:left;box-sizing: border-box;">
        <div style="height:150px;letter-spacing: 2px;margin-top:10px">
          <div style="float:left;width: 180px;">
            <el-image style="width: 130px; height: 130px;border-radius:50%" :src="url">
            </el-image>
          </div>
          <div style="width: 150px;float:left;">
            <div style="height:20px;"></div>
            <p style="font-size:20px;font-weight: 600;color:#303133">你的名字</p>
            <p style="color:#606266">你的身份</p>
          </div>
        </div>
        <div>
          <el-divider style="margin: 5px 0;"></el-divider>
        </div>
        <div style="text-align:center;color:#909399;letter-spacing: 1px;">
          <p style="font-size:14px">上次登录时间 : 2023/8/10 00:00:00</p>
          <p style="font-size:14px">上次在线时长 : 4时00分00秒</p>
        </div>
      </el-card>
      <el-card style="float:left;margin-left:20px;width:68%;height:300px;box-sizing: border-box;">

      </el-card>
    </div>

    <div style="height:400px">
      <el-card style="float:left;box-sizing: border-box;width:49%">
        <div id="main1" style="width: 100%;height: 400px;"></div>
      </el-card>
      <el-card style="float:left;margin-left:20px;box-sizing: border-box;width:49%">
        <div id="main2" style="width: 100%;height: 400px;"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      tableData: [],
    };
  },
  mounted() {
    //柱状图
    var option1 = {
      title: {
        text: "教师课程统计图",
        subtext: "",
        left: "center",
      },
      xAxis: {
        type: "category",
        data: [],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "Life Cost",
          type: "bar",
          data: [],
          stack: "Total",
          label: {
            show: true,
            position: "inside",
          },
        },
      ],
    };

    var chartDom = document.getElementById("main1");
    var myChart = echarts.init(chartDom);
    this.$axios
      .get("http://127.0.0.1:8088/newCourse/teacherEcharts")
      .then((res) => {
        this.tableData = res.data.data;
        for (let a = 0; a < this.tableData.length; a++) {
          option1.series[0].data[a] = this.tableData[a].courseCount;
          option1.xAxis.data[a] = this.tableData[a].tname;
        }
        myChart.setOption(option1);
      });

    var option2 = {
      title: {
        text: "科目课程统计图",
        subtext: "Fake Data",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            {
              value: 0,
              name: "",
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    var chartDom1 = document.getElementById("main2");
    var myChart1 = echarts.init(chartDom1);
    var chartData = []; // 存储动态数据的数组

    this.$axios
      .get("http://127.0.0.1:8088/newCourse/subjectEcharts")
      .then((res) => {
        this.tableData = res.data.data;
        for (let b = 0; b < this.tableData.length; b++) {
          var dataItem = {
            value: this.tableData[b].courseCount,
            name: this.tableData[b].subjectType,
          };
          chartData.push(dataItem);
        }
        option2.series[0].data = chartData;
        myChart1.setOption(option2);
      });
  },
};
</script>

<style>
</style>